<template>
  <div>
    <template v-if="type == 'point'">
      <el-input class="select-width-280" :disabled='readonly' v-model="local" placeholder=""></el-input>
    </template>
    <template v-if="type == 'longTime'">
      <el-input class="select-width-60" :disabled='readonly' v-model="lon.longitude1"></el-input>
      <sup>°</sup>
      <el-input class="select-width-60" :disabled='readonly' v-model="lon.longitude2"></el-input>
      <sup>'</sup>
      <el-input class="select-width-60" :disabled='readonly' v-model="lon.longitude3"></el-input>
      <sup>"</sup>
      <el-select v-model="lon.longitude4" :disabled='readonly' placeholder="" class="select-width-60">
        <el-option label="E" value="E"></el-option>
        <el-option label="W" value="W"></el-option>
      </el-select>
    </template>
    <template v-if="type == 'latTime'">
      <el-input class="select-width-60" :disabled='readonly' v-model="lat.latitude1"></el-input>
      <sup>°</sup>
      <el-input class="select-width-60" :disabled='readonly' v-model="lat.latitude2"></el-input>
      <sup>'</sup>
      <el-input class="select-width-60" :disabled='readonly' v-model="lat.latitude3"></el-input>
      <sup>"</sup>
      <el-select v-model="lat.latitude4" :disabled='readonly' placeholder="" class="select-width-60">
        <el-option label="N" value="N"></el-option>
        <el-option label="S" value="S"></el-option>
      </el-select>
    </template>
  </div>
</template>

<script>
  import coordinateTransform from '@/utils/coordinateTransform.js'
  import Vue from 'vue'

  export default {
    name: 'Location',
    props: ['type', 'data', 'readonly', 'update'],
    data () {
      return {
        lat: {
          latitude1: '',
          latitude2: '',
          latitude3: '',
          latitude4: 'N',
        },
        lon: {
          longitude1: '',
          longitude2: '',
          longitude3: '',
          longitude4: 'E',
        },
        local: ''
      }
    },
    mounted () {
      this.changeData()
    },
    methods: {
      changeData () {
        let local
        if (this.type == 'point' && this.data) {
          local = coordinateTransform.change(this.data, 'toDeg')
          this.local = local
        } else if (this.type == 'longTime' && this.data) {
          local = coordinateTransform.change(this.data, 'toTime')
          if (`${this.data}`.indexOf('-') != -1) {
            this.lon.longitude4 = 'W'
            this.lon.longitude1 = local.split('-')[1].split('°')[0]
          } else {
            this.lon.longitude1 = local.split('°')[0]
          }
          this.lon.longitude2 = local.split('°')[1].split('\'')[0]
          this.lon.longitude3 = local.split('°')[1].split('\'')[1].split('"')[0]
        } else if (this.type == 'latTime' && this.data) {
          local = coordinateTransform.change(this.data, 'toTime')
          if (`${this.data}`.indexOf('-') != -1) {
            this.lon.latitude4 = 'S'
            this.lat.latitude1 = local.split('-')[1].split('°')[0]
          } else {
            this.lat.latitude1 = local.split('°')[0]
            this.lat.latitude1 = local.split('°')[0]
            this.lat.latitude2 = local.split('°')[1].split('\'')[0]
            this.lat.latitude3 = local.split('°')[1].split('\'')[1].split('"')[0]
          }
        } else if (this.type == 'latTime' && !this.data) {
          this.lat.latitude1 = ''
          this.lat.latitude2 = ''
          this.lat.latitude3 = ''
        } else if (this.type == 'longTime' && !this.data) {
          this.lon.longitude1 = ''
          this.lon.longitude2 = ''
          this.lon.longitude3 = ''
        }
      }
    },
    watch: {
      update: {
        deep: true,
        handler (newValue, oldValue) {
          if (newValue) {
            this.changeData()
          }
        }
      },
      local: {
        deep: true,
        handler (newValue, oldValue) {
          this.$emit('update:data', coordinateTransform.change(newValue, 'toTime'))
        }
      },
      lat: {
        deep: true,
        handler (newValue, oldValue) {
          let str = `${newValue.latitude4 == 'S' ? '-' : ''}${newValue.latitude1.trim() ? newValue.latitude1.trim() : 0}°${newValue.latitude2.trim() ? newValue.latitude2.trim() : 0}'${newValue.latitude3.trim() ? newValue.latitude3.trim() : 0}"`
          this.$emit('update:data', coordinateTransform.change(str, 'toDeg'))
        }
      },
      lon: {
        deep: true,
        handler (newValue, oldValue) {
          let str = `${newValue.longitude4 == 'W' ? '-' : ''}${newValue.longitude1.trim() ? newValue.longitude1.trim() : 0}°${newValue.longitude2.trim() ? newValue.longitude2.trim() : 0}'${newValue.longitude3.trim() ? newValue.longitude3.trim() : 0}"`
          this.$emit('update:data', coordinateTransform.change(str, 'toDeg'))
        }
      }
    }
  }
</script>

<style scoped>
  .select-width-60 {
    width: 60px;
  }
</style>
